<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

</head>
<body>

<form class="layui-form" action="">

    <div class="layui-form-item" >
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input type="text" name="groupName"  required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" pane="">
        <label class="layui-form-label">分配权限</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <c:forEach items="${kitList}" var="kitList1" >
                <c:if test="${kitList1.limitPid=='0'}">
                    <table class="layui-table" lay-filter="kittable">
                        <thead>
                        <tr>
                            <th>
                                <input name="limitone_${kitList1.limitId}" value="${kitList1.limitId}" lay-filter="limit" lay-skin="primary" title="${kitList1.limitName}"  type="checkbox">
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${kitList}" var="kitList2" >
                            <c:if test="${kitList2.limitPid==kitList1.limitId}">
                                <tr>
                                    <td>
                                        <input name="limittwo0_${kitList2.limitId}" lay-filter="limit_1" value="${kitList2.limitId}" lay-skin="primary" title="${kitList2.limitName}"  type="checkbox">
                                        <input name="limittwo1_${kitList2.limitId}" lay-filter="limit_1_1" value="1" lay-skin="primary" title="添加"  type="checkbox">
                                        <input name="limittwo2_${kitList2.limitId}" lay-filter="limit_1_1" value="1" lay-skin="primary" title="删除"  type="checkbox">
                                        <input name="limittwo3_${kitList2.limitId}" lay-filter="limit_1_1" value="1" lay-skin="primary" title="修改"  type="checkbox">
                                        <input name="limittwo4_${kitList2.limitId}" lay-filter="limit_1_1" value="1" lay-skin="primary" title="查询"  type="checkbox">
                                    </td>
                                </tr>
                            </c:if>
                        </c:forEach>
                        </tbody>
                    </table>
                </c:if>
            </c:forEach>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'element', 'layer'], function(){
        var form = layui.form,
            layer = layui.layer;
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url : '/manage/group/add',
                type : 'post',
                dataType : 'json',
                data : data.field,
                success : function (data) {
                    if (data.code == 200){
                        layer.msg(data.msg,{icon: 1, time: 500},function (index) {
                            layer.close(index);
                            window.parent.location.reload();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        // checkbox 点击事件处理
        // 选中一级栏目，二级栏目全选
        form.on('checkbox(limit)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
        // 选中二级栏目，增删改查全选
        form.on('checkbox(limit_1)', function(data){
            var child = $(data.elem).parents('tr').find('td input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            if(data.elem.checked){
                $(data.elem).closest("table").find("thead tr th input:checkbox:first").prop("checked",true);
            }else{
                var l2 = $(data.elem).parents('table').find('tbody').find("input:checked").length; // 获取当前元素父元素下面的已经选中的就好了个数
                if(!l2>0){
                    $(data.elem).closest("table").find("thead tr th input:checkbox:first").prop("checked",false);
                }
            }
            form.render('checkbox');
        });
        // 如果有一个增加删除选中，
        form.on('checkbox(limit_1_1)', function(data){
            var l = $(data.elem).parent().find("input:checked").length; // 获取当前元素父元素下面的已经选中的就好了个数
            if (data.elem.checked){ // 说明下面有选中的
                // 如果是选中，那么 第一个  和标题的一个 必须选中
                $(data.elem).closest("tr").find("td input:checkbox:first").prop("checked",true);
                $(data.elem).closest("table").find("thead tr th input:checkbox:first").prop("checked",true);
            } else {
                if(l<=1){
                    $(data.elem).closest("tr").find("td input:checkbox:first").prop("checked",false);
                }
                var l2 = $(data.elem).parents('table').find('tbody').find("input:checked").length; // 获取当前元素父元素下面的已经选中的就好了个数
                if(!l2>0){
                    $(data.elem).closest("table").find("thead tr th input:checkbox:first").prop("checked",false);
                }
            }
            form.render('checkbox');
        });
    });
</script>

<script>
    // function goOut(obj) {
    //     alert(obj.value);
    // }
</script>
</body>
</html>
